<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0; padding:0
        }
        .block{
            display:inline-block;
            width:80px;
            height:80px;
            background:#000;
            margin-left:20px;
        }
        button{
            position: absolute;
            bottom:20px;
            right:40px;
            width:40px;
            height:20px;
            background:rgb(158, 53, 53);
            border:none;
            color:#fff;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div class="block" id="block"></div>
    <button id="button">开始</button>
</body>
<script>
    button.onclick = function(){ 
        debugger;
        fallDown( block,1000 ) 
    };
    function fallDown(obj,distance){
        
        let v = 0;
        let t =0;
        let frame = Math.round( 1000/60 );
        let g = 9.8/frame;
        console.log(  obj.style.marginTop )
        obj.style.marginTop = 0 + 'px'
        let timer = setInterval( function(){
            if( parseFloat(obj.style.marginTop) < distance ){
                
                obj.style.marginTop = (g*Math.pow( t,2 )) + 'px';
                t++;
            }else{
                clearInterval( timer )
            }
       },  frame)
    }
</script>
</html>